<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放松心情</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="css/sortable.min.css">
    <script type="text/javascript" src="css/sortable.min.js"></script>
</head>
<body>
<main class="sortable">
    <div class="container">
        <div class="wrapper">
            <ul class="sortable__nav nav">
                <li> <a data-sjslink="all" class="nav__link"> 全部 </a> </li>
                <li> <a data-sjslink="flatty" class="nav__link"> 放松小游戏 </a> </li>
                <li> <a data-sjslink="funny" class="nav__link"> 视觉盛宴 </a> </li>
            </ul>
            <div id="sortable" class="sjs-default">
                <div data-sjsel="flatty">
                    <div class="card"> <a href="comfortable/gameYbxn/index.html" target="_blank"><img class="card__picture" src="./images/ybxn.png" alt="">
                        <div class="card-infos" >
                            <h2 class="card__title">压扁小鸟</h2>
                            <p class="card__text">你恨 flappy bird 吗?你每天晚上对着那个愚蠢的鸟做噩梦吗？ 压扁它们！减压小游戏，有点暴力。但是很爽啊有木有... </p>
                        </div></a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/wztx/index.html" target="_blank">
                            <img class="card__picture" src="./images/wztx.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">粒子动画</h2>
                                <p class="card__text"> 好看的粒子文字特效，随鼠标而动... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/txjl/index.html" target="_blank">
                            <img class="card__picture" src="./images/txjl.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">不一样的建立简历</h2>
                                <p class="card__text"> 体会一个与平时完全不一样的简历，尊重原著，没有修改任何的代码... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="flatty">
                    <div class="card">
                        <a href="comfortable/csdhs/index.html" target="_blank">
                            <img class="card__picture" src="./images/csdhds.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">彩色大树生长动画</h2>
                                <p class="card__text"> 梦幻彩色大树随你心意肆意生长... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="flatty">
                    <div class="card">
                        <a href="comfortable/ysxz/index.html" target="_blank">
                            <img class="card__picture" src="./images/ysxz.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">音速小子小游戏</h2>
                                <p class="card__text">音速小子小游戏，可点击右下角转VR观看... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="flatty">
                    <div class="card">
                        <a href="comfortable/lztx/index.html" target="_blank">
                            <img class="card__picture" src="./images/lztx.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">粒子特效</h2>
                                <p class="card__text">好玩的粒子特效，消磨时间的首选... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="flatty">
                    <div class="card">
                        <a href="comfortable/cxklz/index.html" target="_blank">
                            <img class="card__picture" src="./images/cxk.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">超酷超炫粒子效果</h2>
                                <p class="card__text">超酷超炫粒子效果，消磨时间的首选... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/3dlft/index.html" target="_blank">
                            <img class="card__picture" src="./images/3dlft.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">3D立方体</h2>
                                <p class="card__text">3D立方体旋转展示动画特效... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/graphics/index.html" target="_blank">
                            <img class="card__picture" src="./images/hhxns.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">动画小绘图</h2>
                                <p class="card__text"> 动画小绘图, 无论你的鼠标走到哪里, 她都会用彩虹笔触作画。... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/3Dtxt/index.html" target="_blank">
                            <img class="card__picture" src="./images/3dtxt.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">3D立体字特效</h2>
                                <p class="card__text"> 3D立体形状字特效，可自定义... </p>
                            </div>
                        </a>
                    </div>
                </div>
                <div data-sjsel="funny">
                    <div class="card">
                        <a href="comfortable/warpDrive/index.html" target="_blank">
                            <img class="card__picture" src="./images/lxtx.png" alt="">
                            <div class="card-infos">
                                <h2 class="card__title">炫酷星空</h2>
                                <p class="card__text"> 很酷的交互式星空背景特效,可用鼠标进行互动。... </p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">
        document.querySelector('#sortable').sortablejs()
    </script>
</main>
</body>
</html>